<template>
	<view>
		<view class="navbar">
		    <view class="navbar-inner">
		      <view class="left">
				  <label class="cuIcon-back" @click="back"></label>
			  </view>
		      <view class="right">反馈任务详细信息</view>
		    </view>
		  </view>
		  <view class="table">
		  	<table>
		  		<tr>
		  			<td class="column">反馈用户</td>
		  			<td>{{message.name}}-{{message.phoneNumber}}</td>
		  		</tr>
		  		<tr>
		  			<td class="column">网格</td>
		  			<td>{{message.sheng}} {{message.shi}}</td>
		  		</tr>
		  		<tr>
		  			<td class="column">详细地址</td>
		  			<td>{{message.address}}</td>
		  		</tr>
		  		<tr>
		  			<td class="column">预估等级</td>
		  			<td>{{message.level}}级</td>
		  		</tr>
		  		<tr>
		  			<td class="column">信息描述</td>
		  			<td>{{message.message}}</td>
		  		</tr>
		  	</table>
		  </view>
		  <view style="background-color: aliceblue;margin-top: 20px;height: 200px;" >
		  	 <ul style="padding-top: 40px;">
		          <li style="display: flex; align-items: center;">
		              <label for="so2-concentration">SO<sub>2</sub>浓度：</label>
		              <input type="number" id="so2-concentration" v-model="so2Concentration" placeholder="请输入SO2浓度" style="margin-left: 10px;"/>ug/m<sub>3</sub>
		              <span style="margin-left: 20px;">{{ so2Level }}</span>
		          </li>
		          <li style="display: flex; align-items: center;">
		              <label for="co2-concentration">CO<sub>2</sub>浓度：</label>
		              <input type="number" id="co2-concentration" v-model="co2Concentration" placeholder="请输入CO2浓度" style="margin-left: 10px;"/>ug/m<sub>3</sub>
		              <span style="margin-left: 20px;">{{ co2Level }}</span>
		          </li>
		          <li style="display: flex; align-items: center;">
		              <label for="pm-concentration">PM<sub>2.5</sub>浓度：</label>
		              <input type="number" id="pm-concentration" v-model="pmConcentration" placeholder="请输入PM2.5浓度" style="margin-left: 10px;"/>ug/m<sub>3</sub>
		              <span style="margin-left: 20px;">{{ pmLevel }}</span>
		          </li>
		      </ul>
		  </view>
		 <view>
		 	<div>
		 	        <div v-if="highestLevel === '等级一'" class="level-one" style="text-align: center;">
		 	            实测AQI等级 一级 低度污染
		 	        </div>
		 	        <div v-if="highestLevel === '等级二'" class="level-two" style="text-align: center;">
		 	            实测AQI等级 二级 中度污染
		 	        </div>
		 	        <div v-if="highestLevel === '等级三'" class="level-three" style="text-align: center;">
		 	            实测AQI等级 三级 高度污染
		 	        </div>
		 	        <div v-if="highestLevel === '等级四'" class="level-four" style="text-align: center;">
		 	            实测AQI等级 四级 严重污染
		 	        </div>
		 	    </div>
		 </view>
		 <view class="button-container">
		   <button class="blue-button" @click="submitAll">提交实测数据</button>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uname:'',
				date:'',
				time:'',
				concentrationLevel:'',
				so2Concentration:'',
				co2Concentration:'',
				pmConcentration:'',
				highestLevel:'',
				message:{
					name:'',
					phoneNumber:'',
					sheng:'',
					shi:'',
					address:'',
					level:'',
					message:''
				}
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			updateHighestLevel() {
			        const levels = [this.so2Level, this.co2Level, this.pmLevel];
			        const levelOrder = ['等级一', '等级二', '等级三', '等级四'];
			        this.highestLevel = levels.reduce((max, level) => levelOrder.indexOf(level) > levelOrder.indexOf(max) ? level : max);
			    },
			submitAll(){
				var getTime = new Date().getTime();
				    var time = new Date(getTime);
				    var year = time.getFullYear();
				    var month = (time.getMonth() + 1).toString().padStart(2, '0');
				    var date = time.getDate().toString().padStart(2, '0');
				    var hour = time.getHours().toString().padStart(2, '0');
				    var minute = time.getMinutes().toString().padStart(2, '0');
				    var second = time.getSeconds().toString().padStart(2, '0');
				    this.date = (year + "-" + month + "-" + date);
				    this.time = (hour + ":" + minute + ":" + second);
				
				    uni.request({
				        url: 'http://localhost:8086/getNmsg',
				        method: 'GET',
				        header: { 'Content-Type': 'application/json' },
				        data: { code: uni.getStorageSync('id') },
				        success: (res) => {
				            console.log(res.data);
				            this.uname = res.data.name;
				
				            const params = {
				                id: uni.getStorageSync('lmsg').bindId,
				                sheng: uni.getStorageSync('lmsg').sheng,
				                shi: uni.getStorageSync('lmsg').shi,
				                aqi: this.AQILevel,
				                fdate: this.date,
				                ftime: this.time,
				                name: this.uname,
				                fname: this.message.name
				            };
				
				            console.log(params);
				            uni.request({
				                url: 'http://localhost:8086/submitMsg',
				                method: 'POST',
				                header: { 'Content-Type': 'application/json' },
				                data: params,
				                success: (res) => {
				                    console.log("提交成功");
				                },
				                fail: (err) => {
				                    console.error('请求失败', err);
				                }
				            });
				        },
				        fail: (err) => {
				            console.error('请求失败', err);
				        }
				    });
			}
		},
		watch: {
		    so2Level(newVal, oldVal) {
		        this.updateHighestLevel();
		    },
		    co2Level(newVal, oldVal) {
		        this.updateHighestLevel();
		    },
		    pmLevel(newVal, oldVal) {
		        this.updateHighestLevel();
		    }
		},
		computed: {
				 AQILevel(){
					 if(this.highestLevel=='等级一')return '优'
					 if(this.highestLevel=='等级二')return '良'
					 if(this.highestLevel=='等级三')return '轻度污染（三）'
					 // if(this.highestLevel=='等级四')
					 return '中度污染（四）'
					 
				 },
		         so2Level() {
		                const concentration = parseFloat(this.so2Concentration);
		                if (!concentration) return '';
		                if (concentration < 50) return '等级一';
		                if (concentration < 100) return '等级二';
		                if (concentration < 200) return '等级三';
		                return '等级四';
		            },
		            co2Level() {
		                const concentration = parseFloat(this.co2Concentration);
		                if (!concentration) return '';
		                if (concentration < 200) return '等级一';
		                if (concentration < 400) return '等级二';
		                if (concentration < 700) return '等级三';
		                return '等级四';
		            },
		            pmLevel() {
		                const concentration = parseFloat(this.pmConcentration);
		                if (!concentration) return '';
		                if (concentration < 15) return '等级一';
		                if (concentration < 35) return '等级二';
		                if (concentration < 75) return '等级三';
		                return '等级四';
		            }
		    },
		onLoad() {
			const param1={
				phoneNumber:uni.getStorageSync('sphone')
			}
			console.log(uni.getStorageSync('sphone'))
			let msg=uni.getStorageSync('lmsg')
			this.message.sheng=msg.sheng
			this.message.shi=msg.shi
			this.message.message=msg.message
			this.message.level=msg.level
			this.message.address=msg.address
			uni.request({
				url:'http://localhost:8086/getMsg',
				method:'GET',
				header:{'Content-Type': 'application/json'},
				data:param1,
				success: (res) => {
					this.message.phoneNumber=res.data.phoneNumber
					this.message.name=res.data.name
				}
			})
		}
	}
</script>

<style>
	.navbar {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  background-color: #123456;
		  color: white;
		  padding: 10px;
		}
	.navbar-inner {
	  display: flex;
	  justify-content: space-between;
	  width: 100%;
	}
	
	.view .table {
	    width: 100%;
	    margin: 20px 0; 
	}
	
	.table table {
	    width: 100%; 
	    border-collapse: collapse;
	    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
	    font-family: Arial, sans-serif; 
	}
	
	.table td, .table th {
	    border: 1px solid #ddd; 
	    padding: 8px; 
	    text-align: left; 
	}
	
	.table tr:nth-child(even){background-color: #f2f2f2;}
	
	.table tr:hover {background-color: #ddd;} 
	
	.table .column {
	    font-weight: bold; 
	    color: #555;
	}
	
	  .view {
	    background-color: aliceblue;
	    padding: 10px;
	    font-family: Arial, sans-serif;
	  }
	

	  ul {
	    list-style-type: none; 
	    padding: 0; 
	  }
	
	  li {
	    display: flex;
	    align-items: center; 
	    margin-bottom: 15px; 
	  }
	
	  input[type="number"] {
	    flex: 1; /* 输入框会占用剩余空间 */
	    margin-left: 10px;
	    border: 1px solid #ccc; /* 边框颜色 */
	    border-radius: 10px; /* 边框圆角 */
	    padding: 8px 12px; /* 内部填充 */
	    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微的阴影 */
	    outline: none; /* 移除蓝色轮廓 */
	  }
	
	  input[type="number"]:focus {
	    border-color: #0056b3; /* 聚焦时边框颜色 */
	    box-shadow: 0 0 8px rgba(0, 86, 179, 0.5); /* 聚焦时阴影 */
	  }
	
	  label {
	    min-width: 140px; /* 确保标签宽度统一 */
	  }
	
	  span {
	    margin-left: 20px;
	    font-weight: bold; /* 等级显示加粗 */
	  }
	.level-one {
	    background-color: green;
	    color: white;
	    padding: 10px;
	}
	.level-two {
	    background-color: yellow;
	    color: black;
	    padding: 10px;
	}
	.level-three {
	    background-color: orange;
	    color: white;
	    padding: 10px;
	}
	.level-four {
	    background-color: red;
	    color: white;
	    padding: 10px;
	}
	.button-container {
	    display: flex;
	    justify-content: center; /* 水平居中 */
	    margin-top: 20px; /* 与上方内容的间距 */
	  }
	
	  .blue-button {
	    background-color: #4CAFF0; /* 浅蓝色背景 */
	    color: white; /* 文字颜色为白色 */
	    border: none; /* 无边框 */
	    border-radius: 5px; /* 轻微的圆角 */
	    /* padding: 10px 20px; */
	    font-size: 16px; /* 字体大小 */
	    font-weight: bold; /* 字体加粗 */
	    cursor: pointer; /* 鼠标悬停时显示指针 */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 轻微的阴影效果 */
	    transition: background-color 0.3s; /* 背景颜色过渡效果 */
	  }
	
	  .blue-button:hover {
	    background-color: #369DDB; /* 鼠标悬停时的背景颜色变深 */
	  }
	
	  .blue-button:active {
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 点击时阴影更深，给人按下的感觉 */
	  }
</style>
